import Vue from 'vue'
import Component from './notify'

/**
 * 思考：我们为什么要这么去做呢？因为我们这里是一个方法，我们要通过JS的方法调用去创建一个Vue的组件，这个组件我们怎么去创建最方便呢？
 * 我们肯定是通过去new的方式，我们可以直接通过new Vue去创建一个组件，那么我们同样可以通过Vue.extend返回的方法，我们去创建一个组件。
 */
const NotificationConstructor = Vue.extend(Component)

const instances = [] // 存储通知组件实例列表
let seed = 1 // 用来生成组件的id

const notify = (options) => {
  if (Vue.prototype.$isServer) return

  const instance = new NotificationConstructor({
    propsData: options
  })
  instance.id = `notification_${seed++}` // 生成唯一id，用来做删除时使用
  // 通过$mount()不传节点的时候，只是生成了一个$el的对象，但是这个时候还没有真正的插入到DOM节点里面去，此时标签节点已经生成好了
  instance.vm = instance.$mount()
  document.body.appendChild(instance.vm.$el)

  // 计算高度
  let verticalOffset = 0
  instances.forEach((item) => {
    verticalOffset += item.$el.offsetHeight + 16 // 每个组件高度间隔16px
  })
  verticalOffset += 16 // 最下面的组件底部距离最底部也有16px的间隙
  instance.verticalOffset = verticalOffset

  instances.push(instance)
  return instance.vm
}

export default notify
